<template>
  <div class="newNurseryCourseContainer">
      <div class="panel">
        <el-form label-width="140px">
          <el-form-item label="课程名称" :r-ules="[{ required: true, message: '' }]">
            <el-input clearable style="width:30%;" v-model="value" placeholder="请输入课程名称"></el-input>
            <div class="explain">支持1-20个字母，汉字，数字和【】（）_-符号的输入</div>
          </el-form-item>
          <el-form-item label="课程类型" :rules="[{ required: true, message: '' }]">
            <el-select style="width:30%;" clearable v-model="value" placeholder="请选择课程类型">
              <el-option
               
                v-for="item in selectCourseList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用年龄" :rules="[{ required: true, message: '' }]">
            <el-select
              v-model="value"
              @change="ageStartChange(2)"
              clearable
              style="width: 1.2rem;"
              placeholder="开始年龄"
            >
              <el-option
                v-for="item in ageStartList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                v-show="item.show"
              ></el-option>
            </el-select>
            <el-select v-model="value" clearable style="width: 0.9rem;" placeholder="单位">
              <el-option
                v-for="item in unitList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>&nbsp;~
            <el-select
              v-model="value"
              @change="ageEndChange(2)"
              clearable
              style="width: 1.2rem;"
              placeholder="结束年龄"
            >
              <el-option
                v-for="item in ageEndList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
                v-show="item.show"
              ></el-option>
            </el-select>
            <el-select v-model="value" clearable style="width: 0.9rem;" placeholder="单位">
              <el-option
                v-for="item in unitList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程周期" :rules="[{ required: true, message: '' }]">
            <el-input clearable style="width:30%;" v-model="value" placeholder="请输入课程名称">
              <span slot="suffix">月</span>
            </el-input>
          </el-form-item>
          <el-form-item label="上课指导" style="margin-bottom:0rem;"></el-form-item>
          <div style="padding:0 0.3rem;">
            <wangeditor
              ref="wangeditor"
              :contenteditable="true"
              editorId="nurseryAddEditor"
              :content="'哈哈哈哈哈哈哈'"
              :catchData="(d)=>{}"
            ></wangeditor>
          </div>
          <el-form-item label="是否启用" :rules="[{ required: true, message: '' }]">
            <el-checkbox v-model="checked">启用</el-checkbox>
          </el-form-item>
        </el-form>

        <div class="btn_div">
          <div class="btn_sure" @click="sure()">确 认</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
  </div>
</template>

<script>
var vm, user;
import wangeditor from "@/components/operation_manage/common/wangeditor";
export default {
  components: { wangeditor },
  data: function() {
    return {
      isAdd: true,
      value: "",
      checked: true,
      ageStartList: [], //筛选适用年龄数据
      ageEndList: [], //筛选适用年龄数据
      selectCourseList: [],
      unitList: [
        {
          name: "月",
          value: 1
        },
        {
          name: "年",
          value: 2
        }
      ]
    };
  },
  methods: {
    init: function(data) {
    },
    ageStartChange: function(type) {
      //开始年龄发生改变
      //限制结束年龄
      vm.ageEndList.forEach(function(item) {
        if (type == 1) {
          if (
            !vm.tabledisplayObj.startSuitableAge ||
            parseInt(item.value) >=
              parseInt(vm.tabledisplayObj.startSuitableAge)
          ) {
            item.show = true;
          } else {
            item.show = false;
          }
        } else {
          if (
            !vm.ageSetObject.minSuitableAge ||
            parseInt(item.value) >= parseInt(vm.ageSetObject.minSuitableAge)
          ) {
            item.show = true;
          } else {
            item.show = false;
          }
        }
      });

      // var age = (vm.ageStart || -1) + "/" + (vm.ageEnd || -1);
    },
    ageEndChange: function(type) {
      //结束年龄发生改变
      //限制开始年龄

      vm.ageStartList.forEach(function(item) {
        if (type == 1) {
          if (
            !vm.tabledisplayObj.endSuitableAge ||
            parseInt(item.value) <= parseInt(vm.tabledisplayObj.endSuitableAge)
          ) {
            item.show = true;
          } else {
            item.show = false;
          }
        } else {
          if (
            !vm.ageSetObject.maxSuitableAge ||
            parseInt(item.value) <= parseInt(vm.ageSetObject.maxSuitableAge)
          ) {
            item.show = true;
          } else {
            item.show = false;
          }
        }
      });

      // var age = (vm.ageStart || -1) + "/" + (vm.ageEnd || -1);
    },
    sure: function() {
      var rules = [];
      let editorStr = this.$refs.wangeditor.callBackHtml();
      console.log(editorStr);
    },
    cancel: function() {
      //隐藏弹窗
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    for (let i = 0; i < 100; i++) {
      vm.ageStartList.push({ name: "" + i, value: "" + i, show: true });
      vm.ageEndList.push({ name: "" + i, value: "" + i, show: true });
    }
  }
};
</script>
<style lang="scss">
.newNurseryCourseContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .explain {
    color: #999999;
    font-size: 0.14rem;
    line-height: 0.2rem;
    padding-left: 0.1rem;
    padding-bottom: 0.08rem;
  }
  .el-input__suffix-inner {
    pointer-events: all;
    color: #666666;
    margin-right: 0.1rem;
  }
}
</style>
<style scoped>
</style>





